<template>
	<div :class="{ hidden: hidden }" class="pagination-container">
		<el-pagination
			:background="props.background"
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:layout="props.layout"
			:page-sizes="props.pageSizes"
			:pager-count="props.pagerCount"
			:total="props.total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
	total: {
		required: true,
		type: Number,
	},
	page: {
		type: Number,
		default: 1,
	},
	limit: {
		type: Number,
		default: 20,
	},
	pageSizes: {
		type: Array,
		default() {
			return [10, 20, 30, 50]
		},
	},
	// 移动端页码按钮的数量端默认值5
	pagerCount: {
		type: Number,
		default: document.body.clientWidth < 992 ? 5 : 7,
	},
	layout: {
		type: String,
		default: 'total, sizes, prev, pager, next, jumper',
	},
	background: {
		type: Boolean,
		default: true,
	},
	hidden: {
		type: Boolean,
		default: false,
	},
})

const emit = defineEmits(['update:page', 'update:limit', 'pagination'])

const currentPage = computed({
	get() {
		return props.page
	},
	set(val) {
		emit('update:page', val)
	},
})

const pageSize = computed({
	get() {
		return props.limit
	},
	set(val) {
		emit('update:limit', val)
	},
})

const handleSizeChange = (val) => {
	emit('pagination', { page: currentPage.value, limit: val })
}

const handleCurrentChange = (val) => {
	emit('pagination', { page: val, limit: props.pageSizes })
}

defineOptions({ name: 'pagination' })
</script>

<style scoped lang="scss">
.pagination-container {
	padding: 32px 16px;
}
.pagination-container.hidden {
	display: none;
}
</style>
